<template>
  <!-- 普通用户显示的内容 -->
  <h2 v-if="role == 1" class="normal-title">我的请假记录</h2>
  <!-- 需要管理权限才显示的数据space 普通用户不予显示 -->
  <div v-if="role != 1" class="space">
    <div class="empty-space">&nbsp;</div>
    <div class="search-space">
      <div class="search-detail">
        请假人：
        <a-input class="search-item" v-model:value="searchItem.userName" placeholder="输入人名查询" style="width: 200px" />
        请假类型：
        <a-select class="search-item" ref="select" v-model:value="searchItem.type" style="width: 200px" placeholder="选择请假类型" @focus="focus" @change="handleChange">
          <a-select-option value="0">事假</a-select-option>
          <a-select-option value="1">产假</a-select-option>
          <a-select-option value="2">病假</a-select-option>
        </a-select>
        请假状态：
        <a-select class="search-item" ref="select" v-model:value="searchItem.status" style="width: 200px" placeholder="1213" @focus="focus" @change="handleChange">
          <a-select-option value="0">待审核</a-select-option>
          <a-select-option value="1">审核中</a-select-option>
        </a-select>
        <a-button class="search-item" type="primary" @click="onSearch" :size="size">搜索</a-button>

        <a-button type="dashed" v-if="isSearching" @click="cancelSearch" :size="size">取消搜索</a-button>
      </div>

      <div class="info">
        <a-alert :message="weekMsg" type="success" />
        <a-alert :message="monthMsg" type="info" />
      </div>
    </div>
  </div>
  <!-- 表格体 -->
  <MyForm ref="childForm" formT="2" :permission="role + ''" :queryInfo="searchItem"></MyForm>

  <!-- modal -->
  <!-- <a-button type="primary" @click="showModal">Open Modal of 1000px width</a-button> -->
  <a-modal v-model:open="open" width="1000px" title="Basic Modal" @ok="handleOk">
    <DetailInfo></DetailInfo>
  </a-modal>
</template>
<script>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import MyForm from '@/components/MyForm'
import DetailInfo from '@/components/DetailInfo'
import { List } from '@/service'
import { result } from '@/utils/tools'

const searchValue = ref('')

export default defineComponent({
  components: {
    SmileOutlined,
    DownOutlined,
    searchValue,
    DetailInfo,
    MyForm,
  },
  setup() {
    // 从vuex获取角色权限信息
    const store = useStore()
    const role = store.state.role.role
    const myId = store.state.myUserId
    const childForm = ref()
    // modal
    console.log('角色权限：' + role)
    const open = ref(false)
    const showModal = () => {
      open.value = true
    }
    const handleOk = (e) => {
      // console.log(e)
      open.value = false
    }
    const searchValue = ref('')
    // 设置搜索状态
    const isSearching = ref(false)
    const searchItem = reactive({
      userName: '',
      type: '',
      status: '',
    })
    // 搜索函数
    const onSearch = () => {
      // console.log(searchItem.type)
      isSearching.value = true
      nextTick(() => {
        childForm.value.getAllLeaveForms()
        // console.log('next tick')
      })
    }
    const cancelSearch = () => {
      searchItem.userName = ''
      searchItem.type = ''
      searchItem.status = ''
      isSearching.value = false
      nextTick(() => {
        childForm.value.getAllLeaveForms()
        // console.log('next tick')
      })
    }
    const weekMsg = ref('')
    const monthMsg = ref('')
    // 获取请假人数（周，月）
    let currentWeekUserTotal = 0
    let currentMonthUserTotal = 0
    const getLeaveUserTotal = async () => {
      const res = await List.getStatistics(myId)
      result(res).success(({ data }) => {
        // console.log(data);
        currentWeekUserTotal = data.currentWeekUserTotal
        currentMonthUserTotal = data.currentMonthUserTotal
        weekMsg.value = `本周请假人数: ${currentWeekUserTotal}`
        monthMsg.value = `本月请假人数: ${currentMonthUserTotal}`
      })
    }
    onMounted(() => {
      getLeaveUserTotal()
    })

    return {
      open,
      showModal,
      handleOk,
      role,
      searchValue,
      isSearching,
      onSearch,
      childForm,
      cancelSearch,
      weekMsg,
      monthMsg,
      currentWeekUserTotal,
      currentMonthUserTotal,
      searchItem,
    }
  },
})
</script>
<style lang="scss">
.normal-title {
  margin-left: 10px;
}
.space {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .search-space {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search-item {
      margin-right: 10px;
    }
    .info {
      display: flex;
      flex-direction: row;
    }
  }
}
</style>
